<template>
  <div class="search-box">
    <!-- <i class="icon-search"></i> -->
    <input ref="query" v-model="query" class="box" @click="goodsSearch" :placeholder="searchItem" @input="changeValue"/>
    <!-- <i @click="clear" v-show="query" class="icon-dismiss"></i> -->
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    searchItem: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      query: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.inputVal) {
        this.query = this.$route.query.inputVal;
      }
      if (this.searchItem) {
        this.query = this.searchItem;
      }
    });
  },
  methods: {
    focus() {
      this.$refs.query.focus();
    },
    changeValue() {
      this.$emit("sendValue", this.query);
    },
    goodsSearch() {
      this.$router.push({
        name: "searchList",
        query: { inputVal: this.query }
      });
    }
  }
};
</script>

<style scoped lang="less">
.search-box {
  padding: 0.15rem 0.3rem;
  height: 0.9rem;
  padding-right: 1rem;
  background: #fff;
  box-sizing: border-box;
  // .icon-search {
  //   font-family: 'music-icon';
  //   position: absolute;
  //   font-size: 0.24rem;
  //   color: #000;
  //   top: 0;
  //   left: 0;
  // }
  .box {
    display: block;
    box-sizing: border-box;
    border-radius: 0.3rem;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 0.82rem;
    font-size: 0.26rem;
    line-height: 0.3rem;
    background: rgb(238, 238, 238);
  }
}
</style>